<template>
  <div class="min-h-screen bg-white">
    <Top />
    <section v-if="!['22', '23', '24'].includes(route.params.id)" class="bg-green-600 flex items-center justify-center" style="height: 12vh; text-align: center;">
      <div class="container mx-auto px-4">
        <div class="relative flex items-center justify-center">
          <button @click="goBack" class="absolute left-0 top-1/2 -translate-y-1/2 text-white hover:text-white/90 cursor-pointer" aria-label="Back">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <h2 class="text-3xl md:text-4xl font-bold text-white">Article Detail</h2>
        </div>
      </div>
    </section>

    <div class="max-w-7xl mx-auto px-6 py-10">
      <div v-if="loading" class="text-center text-gray-500 py-10">Loading...</div>
      <div v-else-if="error" class="text-center text-red-500 py-10">{{ error }}</div>
      <div v-else>
        <h1 class="text-2xl md:text-3xl font-bold text-gray-900 text-center">{{ article.title }}</h1>
        <p class="text-center text-gray-500 mt-3">{{ article.createTime }}</p>
        <div class="h-px bg-gray-200 my-6"></div>
        <div class="richtext" v-html="article.detailed"></div>
      </div>
    </div>

    <Bottom />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleApi } from '~/public/utils/api'

definePageMeta({
  layout: false
})

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const error = ref('')
const article = ref({ title: '', createTime: '', detailed: '' })

async function fetchDetail() {
  const id = Number(route.params.id)
  if (!id) {
    error.value = 'Invalid id'
    return
  }
  loading.value = true
  try {
    const res = await articleApi.getDetail(id)
    const data = res?.data || res
    article.value = {
      title: data.title || '',
      createTime: data.createTime || '',
      // ⚠️ 修复：将 &nbsp; 替换为普通空格，解决文本折行问题
      detailed: (data.detailed || '').replace(/&nbsp;/g, ' ')
    }
  } catch (e) {
    error.value = 'Failed to load article detail'
  } finally {
    loading.value = false
  }
}

onMounted(fetchDetail)

function goBack() {
  router.back()
}
</script>

<style>
/* 富文本通用样式 */
.richtext {
  color: #333;
  line-height: 1.8;
  font-size: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.richtext h1,
.richtext h2,
.richtext h3,
.richtext h4,
.richtext h5,
.richtext h6 {
  font-weight: 700;
  line-height: 1.3;
  margin: 1.2em 0 0.6em;
}
.richtext h1 { font-size: 2rem; }
.richtext h2 { font-size: 1.75rem; }
.richtext h3 { font-size: 1.5rem; }
.richtext h4 { font-size: 1.25rem; }
.richtext h5 { font-size: 1.125rem; }
.richtext h6 { font-size: 1rem; }

.richtext p { margin: 1em 0; }

.richtext ul,
.richtext ol { padding-left: 1.5em; margin: 1em 0; }
.richtext li { margin: 0.4em 0; }

.richtext a { color: #2a649c; text-decoration: underline; }
.richtext a:hover { opacity: 0.85; }

.richtext img,
.richtext video { max-width: 100%; height: auto; display: block; margin: 1em auto; }

.richtext blockquote {
  border-left: 4px solid #e5e7eb;
  padding: 0.5em 1em;
  color: #555;
  background: #fafafa;
  margin: 1em 0;
}

.richtext code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 4px; }
.richtext pre {
  background: #0b1020;
  color: #e5e7eb;
  padding: 1em;
  border-radius: 6px;
  overflow: auto;
  margin: 1em 0;
}
.richtext pre code { background: transparent; padding: 0; }

.richtext table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.richtext th,
.richtext td { border: 1px solid #e5e7eb; padding: 8px 10px; }
.richtext th { background: #f8fafc; font-weight: 600; }
</style>

